<template>
	<view>
		<view class="flex justify-start align-center padding solid-bottom bg-white" @click="onAddPage">
			<view class="cuIcon-roundadd text-grey"></view>
			<view class="margin-left-sm">新建页面</view>
		</view>
		<scroll-view scroll-y class="second-menu " style="height: 35vh;">
			<view v-for="(item,index) in pageList" :key="index" class="flex justify-between padding align-center bg-white solid-bottom"
			 :data-index="index" @click="onSelectPage(index)">
				<view>{{item.name}}</view>
				<view>{{item.create_time}}</view>
			</view>
		</scroll-view>
		<view class="flex justify-start align-center bg-gray padding-sm">
			<view class="flex-sub margin-left">
				<text class="cuIcon-cuIcon text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-text text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-pic text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-square text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-round text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-emojifill text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-move text-grey size-42 "></text>
			</view>

		</view>
		<scroll-view scroll-y class="second-menu" style="height: 50vh;">

			<view v-for="(item,index) in elements" :key="index">
				<cuBar :title="item.name" hint="Modal" modal="3"></cuBar>
				<view>
					<cu-grid :datas="item.list" @onclick="onAddElementItem($event,index)"></cu-grid>
				</view>
			</view>

		</scroll-view>
		<dialog-input title="页面标题" :modalName="modalName" @onhide="modalName=null" @onclick="onChangeTitle"></dialog-input>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import cuGrid from '@/components/single/grid/cu-grid.vue'
	import cuBar from '@/components/single/bar/cu-bar.vue';
	import dialogInput from '@/components/single/modal/dialog_input.vue'
	export default {
		components: {
			cuGrid,
			cuBar,
			dialogInput
		},
		data() {
			let lists = [{
					name: '系统公告',
					type: 0,
					image: 'https://wxt.homeeyes.cn/app/images/message_public.png',
					newMsg: 0,
					info: '今天的作业是证明1+1=3，要求至少写1000000字的证明，每页只能写2个字'
				},
				{
					name: '老师通知',
					type: 1,
					image: 'https://wxt.homeeyes.cn/app/images/message_broadcast.png',
					newMsg: 666,
					info: '今天的作业是抄...'
				},
				{
					name: '作业通知',
					type: 2,
					image: 'https://wxt.homeeyes.cn/app/images/message_broadcast.png',
					newMsg: 81,
					info: '今天的作业是抄<<C++ Prime Plus>>1000000遍，要求每页只能抄10个字'
				}
			];
			return {
				modalName: null,
				current: 0,
				pageList: [],
				elements: [{
						name: 'Header',
						open: false,
						list: [{
							title: '导航栏',
							name: 'header',
							color: 'blue',
							cuIcon: 'medal'
						}, {
							title: '搜索栏',
							name: 'search',
							color: 'blue',
							cuIcon: 'medal'
						}, {
							title: '切换栏',
							name: 'tabbar',
							color: 'blue',
							cuIcon: 'medal',
							data: [{
								name: '标题1',
								cuIcon: 'medal'
							}, {
								name: '标题2',
								cuIcon: 'medal'
							}, {
								name: '标题3',
								cuIcon: 'medal'
							}]
						}]
					},
					{
						name: 'Content',
						open: false,
						list: [{
								title: '标题',
								name: 'title',
								color: 'blue',
								cuIcon: 'medal'
							},
							{
								title: '条目',
								name: 'cell',
								color: 'blue',
								cuIcon: 'medal'
							},
							{
								title: '徽章',
								name: 'badge',
								color: 'blue',
								cuIcon: 'medal'
							},
							{
								title: '胶囊',
								name: 'capsule',
								color: 'blue',
								cuIcon: 'medal'
							},
							{
								title: '条幅',
								name: 'banner',
								color: 'blue',
								cuIcon: 'medal'
							},
							{
								title: '轮播',
								name: 'swiper',
								color: 'blue',
								cuIcon: 'medal'
							},
							{
								title: '卡片',
								name: 'card',
								color: 'blue',
								cuIcon: 'medal'
							}

						]
					}, {
						name: 'List',
						open: false,
						list: [{
								title: '网格',
								name: 'grid',
								color: 'blue',
								cuIcon: 'medal',
								data: lists
							},
							{
								title: '富媒体网格',
								name: 'grid-media',
								color: 'blue',
								cuIcon: 'medal',
								data: lists
							},
							{
								title: '列表',
								name: 'list',
								color: 'blue',
								cuIcon: 'medal',
								data: lists
							},
							{
								title: '条目列表',
								name: 'list-cell',
								color: 'blue',
								cuIcon: 'medal',
								data: lists
							}, {
								title: '富媒体列表',
								name: 'list-media',
								color: 'blue',
								cuIcon: 'medal',
								data: lists
							}, {
								title: '步骤条',
								name: 'steps',
								color: 'blue',
								cuIcon: 'medal',
								data: lists
							}, {
								title: '时间线',
								name: 'timeline',
								color: 'blue',
								cuIcon: 'medal',
								data: lists
							}
						]
					}, {
						name: 'From',
						open: false,
						list: [{
							title: '输入框',
							name: 'input',
							color: 'blue',
							cuIcon: 'medal'
						}, {
							title: '数字框',
							name: 'input-number',
							color: 'blue',
							cuIcon: 'medal'
						}, {
							title: '多行输入框',
							name: 'textarea',
							color: 'blue',
							cuIcon: 'medal'
						}, {
							title: '单选框',
							name: 'radio',
							color: 'blue',
							cuIcon: 'medal',
							data: [{
									name: '男',
									value: '1'
								},
								{
									name: '女',
									value: '2'
								}
							]
						}, {
							title: '多选框',
							name: 'checkbox',
							color: 'blue',
							cuIcon: 'medal',
							data: [{
									name: '西瓜',
									value: 'A',
									checked: true
								},
								{
									name: '苹果',
									value: 'B',
									checked: false
								},
								{
									name: '香蕉',
									value: 'C',
									checked: false
								}
							]
						}, {
							title: '开关',
							name: 'switch',
							color: 'blue',
							cuIcon: 'medal'
						}]
					}, {
						name: 'Footer',
						open: false,
						list: [{
							title: '普通导航',
							name: 'navbar',
							color: 'blue',
							cuIcon: 'medal'
						}, {
							title: '按钮导航',
							name: 'navbar-btns',
							color: 'blue',
							cuIcon: 'medal'
						}, {
							title: '多元导航',
							name: 'navbar-multi',
							color: 'blue',
							cuIcon: 'medal'
						}]
					}
				]
			}
		},
		props: {
			matchLeftWindow: {
				type: Boolean
			}
		},

		computed: {
			...mapState({
				active: state => state.active,
			})
		},
		watch: {
			matchLeftWindow: {
				immediate: true,
				handler(newMatches) {
					this.setMatchLeftWindow(newMatches)
				}
			}
		},
		methods: {
			...mapMutations(['setMatchLeftWindow', 'setActive', 'setPageValue', 'setElementCurrent', 'addPageElement']),
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			onAddPage: function() {
				this.modalName = "InputModal";
			},
			onChangeTitle: function(vals) {
				this.modalName = null;
				console.log(vals)
				this.pageList.push({
					name: vals,
					auther: 'xxx',
					create_time: '2021-03-11',
					lists: [{
						controller: 'Header',
						attribute: {
							text: '测试标题',
							bgcolor: 'bg-gradual-blue',
							back: false
						},
						data: []
					}]
				})
				this.onSelectPage(this.pageList.length - 1);
			},
			onSelectPage: function(index) {
				this.current = index;
				this.setPageValue(this.pageList[index]);
			},
			onAddElementItem: function(childIndex, parentIndex) {
				let element = this.elements[parentIndex].list[childIndex];
				this.addPageElement({
					controller: element.name,
					attribute: {
						text: '测试标题',
						bgcolor: 'bg-gradual-blue',
						back: false
					},
					data: element.data
				});
			}
		}
	}
</script>

<style scoped>
	.second-menu {
		width: 350px;
		background-color: #F8F8F8;
		border-right: #CCCCCC 2upx solid;
	}

	.icon-image {
		width: 30px;
		height: 30px;
	}
</style>
